<template>
  <div class="chart-container app-container nohead">
    <div id="chart" style="height: 200px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import request from "@/utils/request";
import resize from "@/views/extend/graphDemo/mixins/resize.js";
export default {
  mixins: [resize],
  props: {},
  data() {
    return {
      loading: true,
      chart: null,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          x: "left",
          top: "10%",
          data: [],
        },
        series: [
          {
            name: "调查项",
            type: "pie",
            selectedMode: "single",
            radius: [0, "70%"],
            label: {
              normal: {
                position: "inner",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(itemIds) {
      request({
        url:
          "/api/questionnaire/OqQuestionnaireOrderRangeItem/statistics/" +
          itemIds,
        method: "get",
      }).then((res) => {
        this.option.legend.data = res.data.itemText;
        this.option.series[0].data = res.data.itemStatistics;
        this.chart = echarts.init(document.getElementById("chart"));
        this.chart.setOption(this.option);
      });
    },
  },
};
</script>
